<template>
  <div id="wisdomPark">
    <topTitle
      :showInfo="showInfo"
      @handleWeather="handleWeather"
      @handleFont="handleFont"
      @handleHome="handleHome"
      @handleLogin="handleLogin"
    ></topTitle>

    <!-- <TopTitle /> -->
    <div class="item item-V1">
      <wisdomParkSectionV1 ref="El_wisdomParkSectionV1" />
      <wisdomParkSectionV2 ref="El_wisdomParkSectionV2" />
      <wisdomParkSectionV3 ref="El_wisdomParkSectionV3" />
      <wisdomParkSectionV4 />
      <wisdomParkSectionV5 />
    </div>
    <div class="item item-V3">
      <wisdomParkSectionV6 />
      <wisdomParkSectionV7 />
      <wisdomParkSectionV8 />
      <wisdomParkSectionV9 />
    </div>
    <div class="item item-V4">
      <el-icon color="#fff" style="cursor: pointer"><ArrowLeftBold /></el-icon>
      <div class="btn" v-for="i in btn_data" :key="i">{{ i.title }}</div>
      <el-icon color="#fff" style="cursor: pointer"><ArrowRightBold /></el-icon>
    </div>
    <div :class="'location location-v' + (index + 1)" v-for="(i, index) in location_data" :key="i">
      <div class="lightBoard">{{ i.title }}</div>
      <div class="line"></div>
      <div class="dot"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
// import TopTitle from '@/components/publicComponents/topTitle.vue'
import wisdomParkSectionV1 from './c-cpns/wisdomPark-section-v1.vue'
import wisdomParkSectionV2 from './c-cpns/wisdomPark-section-v2.vue'
import wisdomParkSectionV3 from './c-cpns/wisdomPark-section-v3.vue'
import wisdomParkSectionV4 from './c-cpns/wisdomPark-section-v4.vue'
import wisdomParkSectionV5 from './c-cpns/wisdomPark-section-v5.vue'
import wisdomParkSectionV6 from './c-cpns/wisdomPark-section-v6.vue'
import wisdomParkSectionV7 from './c-cpns/wisdomPark-section-v7.vue'
import wisdomParkSectionV8 from './c-cpns/wisdomPark-section-v8.vue'
import wisdomParkSectionV9 from './c-cpns/wisdomPark-section-v9.vue'
import wisdomParkSectionV10 from './c-cpns/wisdomPark-section-v10.vue'
// ========================= 实例
const item_entity = ref<any>(null)
const El_wisdomParkSectionV1 = ref<any>(null)
const El_wisdomParkSectionV2 = ref<any>(null)
const El_wisdomParkSectionV3 = ref<any>(null)
// ========================= 钩子
onMounted(() => {
  item_entity.value = setInterval(() => {
    // El_wisdomParkSectionV1.value.echarts_init()
    El_wisdomParkSectionV2.value.echarts_init()
    // El_wisdomParkSectionV3.value.echarts_init()
  }, 1000)
})
// ========================= 数据
// 按钮
const btn_data = ref<any>([
  {
    title: '智慧灯杆'
  },
  {
    title: '智慧步道'
  },
  {
    title: '智慧公厕'
  },
  {
    title: '智慧信息屏'
  },
  {
    title: '智慧停车场'
  }
])
// 定位点
const location_data = ref<any>([
  {
    title: '智慧步道'
  },
  {
    title: '智慧公厕'
  },
  {
    title: '智慧信息屏'
  },
  {
    title: '智慧停车场'
  },
  {
    title: '智慧公厕'
  },
  {
    title: '智能灯杆'
  },
  {
    title: '智能灯杆'
  }
])
// ========================= 函数

import { useRouter } from 'vue-router'
let showInfo = ref({
  title: '智慧水务',
  titlePyLegth: -100, // 标题偏移（默认 margin-left, px）
  handlePyLenth: -40, // 操作偏移（默认 margin-top, px）
  showWeather: true, // 是否展示头部天气
  showBackFont: true, // 是否展示返回上一级
  showBackHome: true, // 是否展示返回首页
  showBackLogin: true // 是否展示返回登录页
})
const router = useRouter()
const handleWeather = () => {
  console.log('handleWeather')
}
const handleFont = () => {
  // router.back()
  router.replace('/main/ywzl')
}
const handleHome = () => {
  router.replace('/main/home')
}
// 返回登录
const handleLogin = () => {
  window.open('/login')
}

// ========================= 请求
onUnmounted(() => {
  if (item_entity.value) {
    clearInterval(item_entity.value)
    item_entity.value = null
  }
})
</script>

<style scoped lang="less">
#wisdomPark {
  .image(100vw,100vh,url('@/assets/imgs/wisdomPark/wisdomPark-bg.png'));
  background-color: rgba(8, 37, 99, 1);
  position: relative;
  .item {
    position: absolute;
    background-color: rgba(#24374d, 0.4);
  }
  .item-V1 {
    width: 446px;
    top: 60px;
    left: 23px;
  }
  .item-V2 {
    width: 538px;
    top: 335px;
    left: 23px;
  }
  .item-V3 {
    width: 446px;
    top: 60px;
    right: 23px;
  }
  .item-V4 {
    .D_J_A(space-between,center);
    width: calc(100vw - 446px * 2 - @space_20 * 4);
    bottom: 33px;
    left: calc(50% - calc(100vw - 446px * 2 - @space_20 * 4) / 2);
    background-color: transparent;
    .btn {
      .width_height(160px,56px);
      .font-S-W-C(16px, 600, #fff);
      .D_J_A(center,center);
      cursor: pointer;
      border-radius: 4px;
      background-image: linear-gradient(to right, #adcaaa, #007bd39b);
      -webkit-user-select: none; /*webkit浏览器*/
      -moz-user-select: none; /*火狐*/
      -ms-user-select: none; /*IE10*/
      user-select: none;
    }
  }
  .item-V5 {
    // position: relative;
  }
  .item-V6 {
    width: 738px;
    top: 496px;
    left: calc(50% - 738px / 2);
  }
  .item-V7 {
    width: 738px;
    top: 800px;
    left: calc(50% - 738px / 2);
  }
  .item-V8 {
    width: 446px;
    top: 60px;
    right: 23px;
  }
  .item-V9 {
    width: 446px;
    top: 456px;
    right: 23px;
  }
  .item-V10 {
    width: 446px;
    top: 800px;
    right: 23px;
  }

  .location {
    position: absolute;
    .lightBoard {
      .width_height(146px,60px);
      .D_J_A(center,center);
      .font-S-W-C(20px, 400, #fff);
      position: absolute;
      top: -150px;
      left: calc(50% - 146px / 2);
      background-color: #7cc078;
      border: 1px solid #2ed1ee;
      box-sizing: border-box;
      border-radius: 20px;
    }
    .line {
      .width_height(1px,88px);
      background-color: #2ed1ee;
      position: absolute;
      top: -88px;
      left: calc(50% - 0.5px);
    }
    .dot {
      .width_height(12px,12px);
      background-color: #2ed1ee;
      border-radius: 50%;
    }
  }

  .location-v1 {
    top: 22.46875vw;
    left: 31.30208vw;
  }

  .location-v2 {
    top: 14.46875vw;
    left: 51.30208vw;
  }

  .location-v3 {
    top: 17.46875vw;
    left: 56.30208vw;
  }

  .location-v4 {
    top: 28.46875vw;
    left: 66.30208vw;
  }

  .location-v5 {
    top: 39.46875vw;
    left: 61.30208vw;
  }

  .location-v6 {
    top: 40.46875vw;
    left: 51.30208vw;
  }

  .location-v7 {
    top: 48.46875vw;
    left: 44.30208vw;
  }

  :deep(#my_cell) {
    background-color: transparent;
  }
}
</style>
